Flex-direction

Row (from left to right):

A
B
C

Column (from top to bottom):

A
B
C

Row-reverse (but from right to left):

A
B
C

Column-reverse (but from bottom to top):

A
B
C

Flex-wrap

nowrap

A
B
C
D
E
F
G
H
I
J
L
K
L
M

Wrap

A
B
C
D
E
F
G
H
I
J
L
K
L
M
J
L
K
L
M

Wrap-reverse

A
B
C
D
E
F
G
H
I
J
L
K
L
M
J
L
K
L
M

flex-flow

A
B
C
D
E
F
G
H
I
J
L
K
L
M
J
L
K
L
M

Justify-content

Contact
The center value positions the flex items in the center of the container:

A
B
C

Flex-start

The flex-start value positions the flex items at the beginning of the container

A
B
C

Flex-end

The flex-end value positions the flex items at the end of the container:

A
B
C

Space-around

The space-around value displays the flex items with space around them:

A
B
C

Space-between

The space-between value displays the flex items with space between them:

A
B
C

Space-evenly

The space-evenly value displays the flex items with equal space around them

A
B
C

Align-items

Center

The center value positions the flex items in the middle of the container:

A
B
C

flex-start

The flex-start value positions the flex items at the top of the container:

A
B
C

flex-end

The flex-end value positions the flex items at the bottom of the container:

A
B
C

stretch

The stretch value stretches the flex items to fill the container (this is equal to "normal" which is default)

A
B
C

Baseline

The baseline value positions the flex items at the baseline of the container:

A

B

C

D

Align-content

Center

With center, the flex lines are packed toward the center of the container:

A
B
C
D
E
F
G
H
I
J

stretch

With stretch, the flex lines stretch to take up the remaining space of the container

A
B
C
D
E
F
G
H
I
J

flex-start

With flex-start, the flex lines are packed toward the start of the container

A
B
C
D
E
F
G
H
I
J

flex-end

With flex-end, the flex lines are packed toward the end of the container

A
B
C
D
E
F
G
H
I
J

space-between

With space-between, the space between the flex lines are equal, but the first item is flush with the start edge of the container, and the last item is flush with the end edge of the container

A
B
C
D
E
F
G
H
I
J
L
K
L
M
J
L
K
L
M

space-around

With space-around, the space between the flex lines are equal, but the space before the first item and after the last item is set to half of the space between the flex lines

A
B
C
D
E
F
G
H
I
J
L
K
L
M

space-evenly

With space-evenly, the flex lines are evenly distributed in the flex container, with equal space on top, bottom and between:

A
B
C
D
E
F
G
H
I
J
L
K

Perfect Centering

Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered